
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Profiler: Simple Profiling Example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Profiler: Simple Profiling Example</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Profiler: Simple Profiling Example</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows basic usage of the Profiler for profiling a single function. A single function is
profiled and all of the information displayed.</p>	</div>

	<div class="module example-container ">
			<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<script type="text/javascript">

YUI({filter:"debug", logInclude: {"profiler":true, "example":true}}).use("event", "profiler",function (Y) {

    Y.namespace("example.profiler");

    //object with method to profile
    Y.example.profiler.MathHelper = {    
        factorial : function (num){
            if (num > 1) {
                return num * Y.example.profiler.MathHelper.factorial(num-1);
            } else {
                return 1;
            }
        }    
    };
    
    //register the function
    Y.Profiler.registerFunction("Y.example.profiler.MathHelper.factorial", Y.example.profiler.MathHelper);    
     
    Y.on("domready", function (){

        Y.example.profiler.MathHelper.factorial(10);
        
        var calls = Y.Profiler.getCallCount("Y.example.profiler.MathHelper.factorial");
        var max = Y.Profiler.getMax("Y.example.profiler.MathHelper.factorial");
        var min = Y.Profiler.getMin("Y.example.profiler.MathHelper.factorial");
        var avg = Y.Profiler.getAverage("Y.example.profiler.MathHelper.factorial");
        
        Y.Profiler.unregisterFunction("Y.example.profiler.MathHelper.factorial");
        
        var msg = "Method Y.example.profiler.MathHelper was run " + calls + "times.\n" +
                "The average time was " + avg + "ms.\n" +
                "The max time was " + max + " ms.\n" +
                "The min time was " + min + " ms.";
        alert(msg);
    });
});
</script>
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h2 class="first">Simple Profiling Example</h2>

<p>This example begins by creating a namespace:</p>
<div id="syntax-b76dbe07894710a081544cc09d751ba5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="kw2">namespace</span><span class="br0">&#40;</span><span class="st0">&quot;example.profiler&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="kw2">namespace</span><span class="br0">&#40;</span><span class="st0">&quot;example.profiler&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-b76dbe07894710a081544cc09d751ba5-plain">Y.namespace("example.profiler");</textarea></div><p>This namespace serves as the core object upon which others will be added (to prevent creating global objects).</p>
<p>Next, an object is created with a method:</p>
<div id="syntax-d468dece70d0297edb6c6a8efa575329" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//object with method to profile</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span> <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    factorial <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>num<span class="br0">&#41;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>num <span class="sy0">&gt;</span> <span class="nu0">1</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="kw1">return</span> num <span class="sy0">*</span> MathHelper.<span class="me1">factorial</span><span class="br0">&#40;</span>num<span class="sy0">-</span><span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">return</span> <span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//object with method to profile</span>
Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span> <span class="sy0">=</span> <span class="br0">&#123;</span>
    factorial <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>num<span class="br0">&#41;</span><span class="br0">&#123;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>num <span class="sy0">&gt;</span> <span class="nu0">1</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">return</span> num <span class="sy0">*</span> MathHelper.<span class="me1">factorial</span><span class="br0">&#40;</span>num<span class="sy0">-</span><span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
            <span class="kw1">return</span> <span class="nu0">1</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="sy0">;</span></pre></div><textarea id="syntax-d468dece70d0297edb6c6a8efa575329-plain">//object with method to profile
Y.example.profiler.MathHelper = {
    factorial : function (num){
        if (num > 1) {
            return num * MathHelper.factorial(num-1);
        } else {
            return 1;
        }
    }
};</textarea></div><p>This object, <code>MathHelper</code> contains a single method called <code>factorial()</code> that computes the
factorial of a given number. Any time <code>factorial()</code> is called, the argument indicates how many times
the function will be recursively called. For example, <code>factorial(10)</code> results in the funtion being
called 10 times. This makes it an ideal test case for profiling because the results are so predictable.</p>
<h3>Registering the function</h3>
<p>The most important step to profile this function is to call <code>registerFunction()</code> with the fully-qualified
function name, which is <code>Y.example.profiler.MathHelper</code>, and the object:</p>
<div id="syntax-a3a1cf1552dff7dabf32f3951dd1a104" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">Profiler</span>.<span class="me1">registerFunction</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="sy0">,</span> Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">Profiler</span>.<span class="me1">registerFunction</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="sy0">,</span> Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-a3a1cf1552dff7dabf32f3951dd1a104-plain">Y.Profiler.registerFunction("Y.example.profiler.MathHelper.factorial", Y.example.profiler.MathHelper);</textarea></div><p>Since this function is not fully accessible in the global scope, the owner object must be passed in
as the second argument.</p>

<h3>Running the example</h3>

<p>With everything setup, the last step is to run the code. This initialization is assigned to take place when the DOM has been loaded
by using the <code>"domready"</code> custom event:</p>

<div id="syntax-da3e49bd0295f6a0b9c0e32304086aa9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;domready&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span>.<span class="me1">factorial</span><span class="br0">&#40;</span><span class="nu0">10</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> calls <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getCallCount</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> max <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getMax</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> min <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getMin</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> avg <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getAverage</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">Profiler</span>.<span class="me1">unregisterFunction</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> msg <span class="sy0">=</span> <span class="st0">&quot;Method Y.example.profiler.MathHelper was run &quot;</span> <span class="sy0">+</span> calls <span class="sy0">+</span> <span class="st0">&quot;times.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">            <span class="st0">&quot;The average time was &quot;</span> <span class="sy0">+</span> avg <span class="sy0">+</span> <span class="st0">&quot;ms.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">            <span class="st0">&quot;The max time was &quot;</span> <span class="sy0">+</span> max <span class="sy0">+</span> <span class="st0">&quot; ms.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">            <span class="st0">&quot;The min time was &quot;</span> <span class="sy0">+</span> min <span class="sy0">+</span> <span class="st0">&quot; ms.&quot;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw3">alert</span><span class="br0">&#40;</span>msg<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;domready&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    Y.<span class="me1">example</span>.<span class="me1">profiler</span>.<span class="me1">MathHelper</span>.<span class="me1">factorial</span><span class="br0">&#40;</span><span class="nu0">10</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> calls <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getCallCount</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> max <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getMax</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> min <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getMin</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> avg <span class="sy0">=</span> Y.<span class="me1">Profiler</span>.<span class="me1">getAverage</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">Profiler</span>.<span class="me1">unregisterFunction</span><span class="br0">&#40;</span><span class="st0">&quot;Y.example.profiler.MathHelper.factorial&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> msg <span class="sy0">=</span> <span class="st0">&quot;Method Y.example.profiler.MathHelper was run &quot;</span> <span class="sy0">+</span> calls <span class="sy0">+</span> <span class="st0">&quot;times.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span>
            <span class="st0">&quot;The average time was &quot;</span> <span class="sy0">+</span> avg <span class="sy0">+</span> <span class="st0">&quot;ms.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span>
            <span class="st0">&quot;The max time was &quot;</span> <span class="sy0">+</span> max <span class="sy0">+</span> <span class="st0">&quot; ms.<span class="es0">\n</span>&quot;</span> <span class="sy0">+</span>
            <span class="st0">&quot;The min time was &quot;</span> <span class="sy0">+</span> min <span class="sy0">+</span> <span class="st0">&quot; ms.&quot;</span><span class="sy0">;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span>msg<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-da3e49bd0295f6a0b9c0e32304086aa9-plain">Y.on("domready", function (){
    Y.example.profiler.MathHelper.factorial(10);

    var calls = Y.Profiler.getCallCount("Y.example.profiler.MathHelper.factorial");
    var max = Y.Profiler.getMax("Y.example.profiler.MathHelper.factorial");
    var min = Y.Profiler.getMin("Y.example.profiler.MathHelper.factorial");
    var avg = Y.Profiler.getAverage("Y.example.profiler.MathHelper.factorial");

    Y.Profiler.unregisterFunction("Y.example.profiler.MathHelper.factorial");

    var msg = "Method Y.example.profiler.MathHelper was run " + calls + "times.\n" +
            "The average time was " + avg + "ms.\n" +
            "The max time was " + max + " ms.\n" +
            "The min time was " + min + " ms.";
    alert(msg);
});</textarea></div><p>The code block begins by calling <code>factorial()</code> once, which gets profiled. Then, the information
about the function can be retrieved from the Profiler. This information is output in an alert,
displaying the number of times that the function was called along with the minimum, maximum, and average
running times. Since this is a very simple function, the run times will most likely be 0ms on most machines.</p>
				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Profiler Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../profiler/profiler-simple-example.html'>Simple Profiling Example</a></li><li><a href='../profiler/profiler-object-example.html'>Object Profiling Example</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Profiler Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/profiler/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_profiler.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {filter:"debug", logInclude: {"profiler":true, "example":true}};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
